<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>郴州市气象局防灾减灾地图</title>
<link rel="stylesheet" href="./css/style2.css" />
<script src="../js/common.js" type="text/javascript"></script>
<script src="../js/common-login.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/buttons.css">
<link rel="stylesheet" href="./css/baguetteBox.css">
<style>
html, body, #container {
	margin: 0;
	height: 100%;
}
.amap-info-content {
  padding: 27px 10px 10px 10px;
}
table.tab {
  border-collapse: collapse;
  border: 1px solid lightgray;
  width: 100%;
  color: #000;
  font-size: 14px;
}

table tr {
  border: 1px solid lightgray;
}

table.tab tr td:first-child {
  width: 6em;
  text-align: right;
  font-weight:bold;
  line-height:35px;
}
.gallery{
    text-align: left;
}
.floattool .graphic_nav .layer-pop .line label{
  margin-bottom: 0px;
  height: 15px;
  line-height:15px;
  font-size:12px;
  width: 101px;
  color: blue;
  font-weight:400;
}
.floattool .graphic_nav .layer-pop .jsl{
  margin: 0px 2px 0px 0px;
  vertical-align: middle;
}
.floattool .graphic_nav .layer-pop div.line{
  height: 16px;
  line-height:16px;
  text-align: left;
}
.oooother{
  background-color: gray;
  position: absolute;
  z-index: 1000;
  right: 0px;
  top: 75px;
  background: #fff;
  border-radius: 3px;
  width: 281px;
  font-size: 13px;
  height: 275px;
  opacity: 0.7;
}
.stationDataClass{
  line-height:14px;
  width: 100px;
  text-align: left;
  white-space:nowrap;
}
.stationDataClass span{
  margin-left: 3px;
  font-size: 12px;
  white-space:nowrap;
  display: none
}
.dateDiv{
  line-height:22px;
  text-align: left;
}
.button{
  height: 25px !important;
  padding: 1px 6px !important;
  vertical-align: bottom;
}
.line1 label{
  margin-bottom: 0px;
  height: 15px;
  line-height:15px;
  font-size:12px;
  font-weight:400;
}
.line1 {
  height: 25px;
  line-height:25px;
  text-align: left;
}
.Wdate{
  width: 110px;
}
.hide{
  display: none;
}
.topwin{
	display: inline-block;
	top: 24px;
    left: 43%;
    font-size: 20px;
    background: rgba(162, 13, 13, 0.1);
}
.topwin .content{
	color: #000;
	font-weight: bold;
	font-size: 13px;
    display: inline;
    float:left;
}
.topwin .tabtop_rt {
    float: right;
    display: block;
    width: 14px;
    height: 14px;
    background: url(./images/indexImg.png) -160px 0px no-repeat;
    cursor: pointer;
    margin: 3px 8px 0px 16px;
}
.loading{
  top: 20px;
  left:20px;
  width:100%;
  height:100%;
  background-color: rgba(255,255,255,0);
  background-image:url('./images/load.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
  z-index:1000;
  display:none;
}
.dialog{
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-width: 0;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: absolute;
  top:10%;
  left:10%;
  width: 80%;
  height: 70%;
  padding: .75rem;
  color: #333;
  font-weight: 400;
  font-size: 17px;
  display:none;
  z-index:998;
}
.dialog .close{
  position: absolute;
  right: 7px;
  top: 9px;
}
.dialog .common-panel-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  color: #333;
  padding-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.beautiful-table{
  border-collapse: collapse;
  width: 100%;
  color: #000;
  font-size: 14px;
}
.beautiful-table td{
  border: 1px solid lightgray;
  width: 8.3%;
  text-align: center;
}
.dialog .title{
  text-align: center;
  margin-top: 5px;
}
.dialog .subtitle{
  text-align: center;
  font-size:14px;
  font-weight:bold;
  margin-bottom: 5px;
}
.dialog .footer{
  position: absolute;
  width: 100%;
  bottom: 5px;
  padding-right: 20px;
  font-size: 14px;
  font-wegiht:bold;
  text-align:right;
  color: red;
  height:60px;
}
.tablediv{
  position: relative;
  height: 300px;
  border: 1px solid lightgray;
}
.content-div{
  position: relative;
  height: 300px;
}
</style>
</head>
<body>
  <div id="container"></div>
  <div class="input-card" style="width: 30rem;">
    <header class="clearfix">
      <div class="header-logo"></div>
      <div id="menu_display" class=""></div>
    </header>
    <div class="left-down" style="display: none;">
      <nav class="classify-box">
        <ul class="classify">
          <li class="classify-list special active"><div class="specialNav active" title="图层"></div></li>
        </ul>
      </nav>
      <div class="classify-content" style="display: block;">
        <div class="classify-tool clearfix">
          <h3 class="classify-title">图层</h3>
          <a href="javascript:void(0);" class="clear-all"><span></span>重置</a>
        </div>
        <div id="subjectTree" class="foo foo--inside">
          <ul class="classify-children"></ul>
          <div class="loading" style="display: none;">
            <img
              src="">
          </div>
        </div>
      </div>
      <div id="down-up" class="down-up">
        <div class="down-up-btn"></div>
      </div>
    </div>
  </div>
  <div class="win-card" style="display: none" id="winCard">
    <div class="tit">标题</div>
    <hr>
    <div class="cnt">内容</div>
  </div>
  <div class="floattool">
    <div class="layer_nav">
      <div class="icon"></div>
      <div class="common-panel layer-pop" style="display: none;">
        <a href="javascript:void(0);" class="close"></a> <span class="angle-to-right"></span>
        <h3 class="common-panel-title">选择底图</h3>
        <div class="layer-items clearfix">
          <a class="active" href="javascript:void(0);" data-tag="normal"><img
            src="">地图</a>
          <a href="javascript:void(0);" style="margin: 0 16px" data-tag="satellite"><img
            src="">影像
          </a> <a href="javascript:void(0);" data-tag="dx"><img
            src="">地形
          </a>
        </div>
        <!--<div class="layer-arguments">
          <span>地名</span>
          <span data-tag="cn" class="check"></span>
      </div>-->
        <div class="layer-arguments features">
          <span>地图背景</span> <span data-tag="bg" class="check"></span>
        </div>
        <div class="layer-arguments features">
          <span>标注</span> <span data-tag="point" class="check"></span>
        </div>
        <div class="layer-arguments features">
          <span>道路</span> <span data-tag="road" class="check"></span>
        </div>
        <div class="layer-arguments">
          <span>根据权重呈现标记点</span> <span data-tag="zoomMarker" class="check"></span>
        </div>
       <!--  <div class="layer-arguments">
          <span>建筑物</span> <span data-tag="building" class="check"></span>
        </div> -->
      </div>
    </div>
    <div class="v_separator"></div>
    <div class="table_nav">
      <div class="icon"></div>
    </div>
    <div class="v_separator"></div>
    <div class="graphic_nav">
      <div class="icon"></div>
      <div class="common-panel layer-pop" style="display: none;top:76px">
        <div class="oooother"></div>
        <a href="javascript:void(0);" class="close"></a> <span class="angle-to-right"></span>
        <h3 class="common-panel-title">降水量</h3>
        <div class="layer-arguments features" style="border-top: 0px;border-bottom: 1px solid #eee;margin-top: 0px;">
          <span>启用降水量</span> <span data-tag="switch" class="uncheck"></span>
        </div>
        <div class="layer-items clearfix" style="padding-top: 1px;border-bottom: 1px solid #eee;margin-top: 4px;margin-bottom: 2px;">
          <div class="line1">
            <input type="radio" value="1" id="h11" name="query" class="jsl" checked><label for="h11">单时次</label>
            <input type="radio" value="2" id="h21" name="query" class="jsl"><label for="h21">任意时次</label>
            <input type="radio" value="3" id="h31" name="query" class="jsl"><label for="h31">任意分钟</label>
          </div>
          <div class="dateDiv line1" style="display:none"><label>开始时间：</label><input type="text" class="Wdate" id="beginTime" placeholder="开始时间" ></div>
          <div class="dateDiv line1">
           <label>查询时间：</label><input type="text" class="Wdate" id="endTime" placeholder="结束时间">
            <input type="button" class="button green" onclick="rain.query();" value="查询">
          </div>
        </div>
        <div class="layer-items clearfix item1" style="padding-top: 1px;margin-top: 4px;">
          <div class="line">
            <input type="radio" value="1" id="h1" name="hour" class="jsl" checked><label for="h1">过去1小时降水量</label>
            <input type="radio" value="3" id="h3" name="hour" class="jsl"><label for="h3">过去3小时降水量</label>
          </div>
          <div class="line">
            <input type="radio" value="6" id="h6" name="hour" class="jsl"><label for="h6">过去6小时降水量</label>
            <input type="radio" value="12" id="h12" name="hour" class="jsl"><label for="h12">过去12小时降水量</label>
          </div>
          <div class="line">
            <input type="radio" value="24" id="h24" name="hour" class="jsl"><label for="h24">过去24小时降水量</label>
          </div>
        </div>
        <div class="layer-items clearfix hide item2" style="padding-top: 1px;margin-top: 4px;">
          <div class="line">
            <input type="radio" value="1" id="h121" name="hours" class="jsl" checked><label for="h121">降水量</label>
          </div>
        </div>
        <div class="layer-arguments features">
          <span>区域站名</span> <span data-tag="stationName" class="uncheck"></span>
        </div>
        <div class="layer-arguments features">
          <span>自动刷新(8分钟)</span> <span data-tag="refresh" class="check"></span>
        </div>
        <div class="layer-arguments features">
          <span>阈值报警(30mm)</span> <span data-tag="warn" class="check"></span>
        </div>
        <div class="layer-arguments features">
          <span><a href="#" id="viewTable">表格</a></span>
        </div>
      </div>
    </div>
    <div class="v_separator"></div>
    <div class="time_nav">
      <div class="icon"></div>
    </div>
  </div>
  <div class="win-card topwin" style="display: none" id="tipWin">
  	<div class="content">没有相关数据</div>
  	<div class="tabtop_rt"></div>
  </div>
  <div class="loading" id="loadingWin">
  </div>
  <div class="dialog" id="dialogWin">
    <a href="javascript:void(0);" class="close"></a> <span class="angle-to-right"></span>
	<h3 class="common-panel-title">降水量</h3>
    <div class="title">湖南省阿萨德发送记得发第三届发牢骚打飞机阿鲁卡的父</div>
    <div class="subtitle">2019年09月09日15时 到 2019年09月10日15时</div>
    <div class="tablediv foo foo--inside--dialog"><div class="main">
    <table class="beautiful-table"></table>
    </div></div>
    <div class="footer">
                根据最新自动气象站监测，8日08时-9日08时，总面雨量为86.3毫米，:≥0.1mm的站数为10个;≥10.0mm的站数为0个;≥25.0mm的站数为0个;≥50.0mm的站数为0个;≥100.0mm的站数为0个;＞200mm的站数为0个;<br>
                最大累积降水出现在安仁县灵官镇豪田村为114.1毫米，最大小时雨强出现在安仁县永乐江镇清溪清路为51.4毫米。
    </div>
  </div>
  <div class="dialog" id="frameWin" style="display: none;z-index:10000">
    <a href="javascript:void(0);" class="close"></a> <span class="angle-to-right"></span>
    <h3 class="common-panel-title">标题</h3>
    <div class="content-div foo--inside--dialog--frame">121</div>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=beaa3b8b537e2baf9003ec089fae2db2&plugin=AMap.MarkerClusterer"></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/WdatePicker.js"></script>
  <script src="./js/smooth-scrollbar.js"></script>
  <script type="text/javascript" src="./js/baguetteBox.js"></script>
  <script type="text/javascript" src="./js/highlight.min.js"></script>
  <script src="./js/areasInfo.js"></script>
  <script src="./js/gaodeMap.js"></script>
  <script src="./js/rainMarker.js"></script>
  <script src="./js/rainfall.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>